import BatteryParams from '@/pages/BatteryHealthEvaluate/Cycle/components/BatteryParams';
import StationCharts from '@/pages/BatteryHealthEvaluate/Cycle/components/StationCharts';
import StationParams from '@/pages/BatteryHealthEvaluate/Cycle/components/StationParams';
import { cycleLifeControllerGetCycleLife } from '@/services/ess/cycleLife';
import { Card } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const Cycle: React.FC = () => {
  const [stationParams, setStationParams] = useState({});
  const [batteryParams, setBatteryParams] = useState({});
  const [chartInfo, setChartInfo] = useState();
  const [chartsLoading, setChartsLoading] = useState(false);
  useEffect(() => {
    const initParams = {
      unit: 'D',
      startDate: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
      endDate: dayjs().add(1, 'month').format('YYYY-MM-DD'),
    };
    setChartsLoading(true);
    cycleLifeControllerGetCycleLife(initParams)
      .then((res) => {
        if (res.success) {
          setStationParams({
            currentStationSoh: res?.data?.currentStationSoh,
            totalCycleCount: res?.data?.totalCycleCount,
          });
          setBatteryParams({
            currentDemarcateCapacity: res?.data?.currentDemarcateCapacity,
            compareResult: res?.data?.compareResult,
            currentStationCapacity: res?.data?.currentStationCapacity,
          });
          setChartInfo({
            chartOptions: res?.data?.stationSohTable,
            suggestions: res?.data?.suggestion,
            randomMath: Math.random(),
          });
          setChartsLoading(false);
        } else {
          setChartsLoading(false);
        }
      })
      .catch(() => {
        setChartsLoading(false);
      });
  }, []);
  return (
    <>
      <div className={styles.cycHeader}>
        <Card>
          <StationParams stationParams={stationParams} />
        </Card>
        <Card className={styles.batteryParams}>
          <BatteryParams batteryParams={batteryParams} />
        </Card>
      </div>
      <div>
        <StationCharts chartInfo={chartInfo} chartsLoading={chartsLoading} />
      </div>
    </>
  );
};

export default Cycle;
